<template>
  <div id="app">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell>
        <div class="comment_copy">
          <van-image
            fit="cover"
            round
            :src="currentItem.aut_photo"
            width="40px"
            height="40px"
          />
          <div class="comment_box">
            <div class="comment_name">{{ currentItem.aut_name }}</div>
            <div class="comment_content">
              {{ currentItem.content }}
            </div>
            <div class="comment_time">
              {{ currentItem.pubdate | relativeTime }}
            </div>
          </div>
        </div>
      </van-cell>
      <!-- 分割线 -->
      <van-divider>分割列表</van-divider>
      <!-- 回复的信息区域 -->
      <van-cell v-for="item in list" :key="item.com_id">
        <template #title>
          <div class="comment_copy">
            <van-image
              fit="cover"
              round
              :src="item.aut_photo"
              width="40px"
              height="40px"
            />
            <div class="comment_box">
              <div class="comment_name">{{ item.aut_name }}</div>
              <div class="comment_content">{{ item.content }}</div>
              <div class="comment_time">
                {{ item.pubdate | relativeTime }}
              </div>
            </div>
            <van-icon
              :name="item.is_liking ? 'like' : 'like-o'"
              @click="likings(item)"
            ></van-icon>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 回复评论 -->
    <van-field
      v-model="commentValue"
      clearable
      placeholder="请输入评论内容"
      class="field"
    >
      <template #button>
        <van-button size="small" type="info" @click="sub">回复评论</van-button>
      </template>
    </van-field>
  </div>
</template>

<script>
import { cmtListAPI, cmtIssueAPI, likingAPI } from '@/api/index.js'
export default {
  props: {
    currentItem: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      commentValue: '', // 输入的评论内容
      sheetShow: false,
      author: '',
      offset: undefined,
      cmtValue: ''
    }
  },
  methods: {
    // 发起获得评论的回复内容
    async onLoad () {
      let res = await cmtListAPI({
        type: 'c',
        source: this.currentItem.com_id
      })
      // console.log(res);
      // 因为直接赋值会覆盖掉之前获得的评论，所以使用追加
      this.list.push(...res.data.data.results)
      // 把本次请求的最后一条的数据作为下次请求的参数
      this.offset = res.data.data.last_id
      this.loading = false
      // 判断当前最后一条评论的id是否等于所有数据的最后一条id
      if (res.data.data.end_id == res.data.data.last_id) {
        // 代码进入到这里说明评论加载完毕了
        this.finished = true
      }
    },
    // 发表评论的回复的接口
    async sub () {
      if (!this.commentValue) return alert('评论内容不能为空')
      // 发起请求发表评论
      let res = await cmtIssueAPI({
        target: this.currentItem.com_id,
        content: this.commentValue,
        art_id: this.$route.query.id
      })
      // console.log(res);
      this.list.unshift(res.data.data.new_obj)
      // 让标签评论的回复数+1
      this.currentItem.reply_count++
      // 评论发表成功后清空输入框
      this.commentValue = ''
      this.$toast.success('回复评论成功')
    },
    async likings (item) {
      await likingAPI({
        target: item.com_id
      })
      // console.log(res);
      if (item.is_liking) {
        item.is_liking = !item.is_liking
      } else {
        item.is_liking = !item.is_liking
      }
    }
  }
}
</script>

<style lang="less" scoped>
.comment_copy {
  display: flex;
  .comment_box {
    flex: 1;
    margin-left: 20px;
    .comment_name {
      color: rgb(70, 107, 157);
    }
    .comment_time {
      color: #ccc;
      align-items: center;
      font-size: 12px;
    }
  }
}
.field {
  position: fixed;
  width: 100%;
  left: 0;
  font-size: 16px;
  z-index: 999;
  bottom: 0;
  border-top: 1px solid #eee;
}
</style>
